<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>管理员首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
      body {
            margin: 0;
            padding: 0;
            font: 16px/20px microsft yahei;
            background: radial-gradient(200% 100% at bottom center, #DEB887, #bebebe 40%, #242f4e);
            background: radial-gradient(220% 105% at bottom center, #DEB887, #ad5757 40%, #242f4e);
            background-attachment: fixed;
            overflow: hidden;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
         }
        
        
        .wrap {
            width: 100%;
            height: 100%;
            padding: 3% 0;
            position: fixed;
            opacity: 0.8;
            background: linear-gradient(to bottom right,#000000, #656565);
            background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6);
        }

        #banner{
            width:100%;
            height: 60px;
            border-bottom: 1px solid #EFEFEF;
            
        }
        #banner div:nth-child(1){
            font-size: 50px;
            color:white;
            font-weight: 600;
            font-family: "Verdana";
            margin-left: 80px;
            height: 60px;
            line-height: 40px;
            float: left;
        }
        #banner div:nth-child(2){
            font-size: 20px;
            margin-left: 200px;
            margin-top: 25px;
            font-weight: 600;
            height: 30px;
            line-height: 10px;
            width:150px;
            text-align: center;
            float: left;
            border-left: 1px solid #ccc;
            color:white;
        }
        #banner div:nth-child(3){
            font-size: 16px;
            margin-right: 50px;
            margin-top: 30px;
            height: 20px;
            line-height: 20px;
            width:100px;
            text-align: center;
            float: right;
            border-left: 1px solid #ccc;
            color:white;
        }

        #container{
            width:100%;
            height: 650px;
            min-height: 500px;
            margin:0px auto;

        }
        #container #main{
            width: 40%;
            margin: 0 auto;
            
            margin-top:60px;
        }
        #container #main input[type="text"]{
            width: 100%;
            height: 60px;
            margin: 10px auto;
            border: 1px solid #DCDCDC;
            border-radius: 5px;
            padding-left: 10px;
            font-family: "微软雅黑";
            font-size: 20px;
            color: #626262;
        }
        #container #main input[type="password"]{
            width: 100%;
            height: 60px;
            margin: 10px auto;
            border: 1px solid #DCDCDC;
            border-radius: 5px;
            padding-left: 10px;
            font-family: "微软雅黑";
            font-size: 20px;
            color: #626262;
        }
        #container #main input[type="button"]{
            width: 100%;
            height: 60px;
            margin: 0px auto;
            border: 1px solid #DCDCDC;
            
            font-family: "微软雅黑";
            padding: 20px;
            font-size: 20px;
            color: #fff;
        }
        #container #main input:nth-child(1){margin-top: 30px;}

        button{
            height: 50px;
            width: 100%;
            padding:0 15px;
    
            border-radius: 4px;
            margin-left:8px;
           
            color: white;
        }

        

        #bottom1{

            width:280px;
            height:80px;
            border-radius:50%;
            line-height: 20px;
            text-align: center;
            font-size:30px;
            background-color: Transparent;
            background-repeat:no-repeat;
            cursor:pointer;
            overflow: hidden;
            outline:none;
            border-color: black;
      }

         #bottom2{
            color: #DCDCDC;
      }

        div{
            text-align: center;
        }

        #nextBtn1{
            height: 50px;
            width: 100%;
            padding:0 15px;
            font-size: 18px;
            border-radius: 4px;
            margin-left:8px;
           
            color: white;
        }
        #nextBtn1:hover{
            color: black;
            font-weight: bold;
            opacity: 1;
        }
        
        dt{
            color: black;
        }
        
    </style>
</head>
<body>
    <div class="wrap">
     <div class="stars" id="stars">
     <div id="topLine"></div>
    <div id="banner">
    <div>Ware House</div>
    <div>管 理 员 首 页</div>
    <div id="goBack"><a th:href="@{/MyLogout}"><dt>退出登录</dt></a></div>
   </div>

<div id="container">
    <div id="main">
    <form>
<!--           <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>--><div>
            <button id="bottom1" class="ant-btn ant-btn-red"><a th:href="@{/admiQueryWareHouse}">查询库存</a></button>
            <br><br><br><br>
            <button id="bottom1" class="ant-btn ant-btn-red"><a th:href="@{/admiQueryUser}">查询用户表</a></button>
            <br><br><br><br>
            <button id="bottom1" class="ant-btn ant-btn-red"><a th:href="@{/admiQueryAllInstorage}">查询进货记录</a></button>
            <br><br><br><br>
            <button id="bottom1" class="ant-btn ant-btn-red"><a th:href="@{/admiQueryAllOutstorage}">查询出货记录</a></button>
            <br><br><br><br><br><br><br><br><br>
            <div class="text" style=" text-align:center; color: black;">©2005-2016 XX市XXXX科技有限公司 版权所有 X ICP备00000000号-1</div>
            </div>
        </form>
        
    </div>

</div>


</body>
</script>
</body>
<script type="text/javascript">
var BACKGROUND_COLOR = "";   // 背景色
var POINT_NUM = 99;                         // 屏幕上点的数目
var POINT_COLOR = "rgba(255,255,255,0.7)";  // 点的颜色
var LINE_LENGTH = 10000;                    // 点之间连线长度(的平方)

// 创建背景画布
var cvs = document.createElement("canvas");
cvs.width = window.innerWidth;
cvs.height = window.innerHeight;
cvs.style.cssText = "\
    position:fixed;\
    top:0px;\
    left:0px;\
    z-index:-1;\
    opacity:1.0;\
    ";
document.body.appendChild(cvs);

var ctx = cvs.getContext("2d");

var startTime = new Date().getTime();

//随机数函数
function randomInt(min, max) {
    return Math.floor((max - min + 1) * Math.random() + min);
}

function randomFloat(min, max) {
    return (max - min) * Math.random() + min;
}

//构造点类
function Point() {
    this.x = randomFloat(0, cvs.width);
    this.y = randomFloat(0, cvs.height);

    var speed = randomFloat(0.3, 1.4);
    var angle = randomFloat(0, 2 * Math.PI);

    this.dx = Math.sin(angle) * speed;
    this.dy = Math.cos(angle) * speed;

    this.r = 1.2;

    this.color = POINT_COLOR;
}

Point.prototype.move = function () {
    this.x += this.dx;
    if (this.x < 0) {
        this.x = 0;
        this.dx = -this.dx;
    } else if (this.x > cvs.width) {
        this.x = cvs.width;
        this.dx = -this.dx;
    }
    this.y += this.dy;
    if (this.y < 0) {
        this.y = 0;
        this.dy = -this.dy;
    } else if (this.y > cvs.height) {
        this.y = cvs.height;
        this.dy = -this.dy;
    }
}

Point.prototype.draw = function () {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
}

var points = [];

function initPoints(num) {
    for (var i = 0; i < num; ++i) {
        points.push(new Point());
    }
}

var p0 = new Point(); //鼠标
p0.dx = p0.dy = 0;
var degree = 2.5;
document.onmousemove = function (ev) {
    p0.x = ev.clientX;
    p0.y = ev.clientY;
}
document.onmousedown = function (ev) {
    degree = 5.0;
    p0.x = ev.clientX;
    p0.y = ev.clientY;
}
document.onmouseup = function (ev) {
    degree = 2.5;
    p0.x = ev.clientX;
    p0.y = ev.clientY;
}
window.onmouseout = function () {
    p0.x = null;
    p0.y = null;
}

function drawLine(p1, p2, deg) {
    var dx = p1.x - p2.x;
    var dy = p1.y - p2.y;
    var dis2 = dx * dx + dy * dy;
    if (dis2 < 2 * LINE_LENGTH) {
        if (dis2 > LINE_LENGTH) {
            if (p1 === p0) {
                p2.x += dx * 0.03;
                p2.y += dy * 0.03;
            } else return;
        }
        var t = (1.05 - dis2 / LINE_LENGTH) * 0.2 * deg;
        ctx.strokeStyle = "rgba(255,255,255," + t + ")";
        ctx.beginPath();
        ctx.lineWidth = 1.5;
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.closePath();
        ctx.stroke();
    }
    return;
}

//绘制每一帧
function drawFrame() {
    cvs.width = window.innerWidth;
    cvs.height = window.innerHeight;
    ctx.fillStyle = BACKGROUND_COLOR;
    ctx.fillRect(0, 0, cvs.width, cvs.height);

    var arr = (p0.x == null ? points : [p0].concat(points));
    for (var i = 0; i < arr.length; ++i) {
        for (var j = i + 1; j < arr.length; ++j) {
            drawLine(arr[i], arr[j], 1.0);
        }
        arr[i].draw();
        arr[i].move();
    }

    window.requestAnimationFrame(drawFrame);
}

initPoints(POINT_NUM);
drawFrame();
</script>
</html>
 
